<template>
  <div class="container">
    <Category>
      <template v-slot:category-slot-content="{ games }">
        <h1>Category 1</h1>
        <h4 v-for="game in games" :key="game">{{game}}</h4>
        <img
          src="./assets/logo.png"
          alt="Category 1 image"
          title="Category 1 image"
        />
      </template>
      <template v-slot:category-slot-footer>
        <h1>Category 1</h1>
        <img
          src="./assets/logo.png"
          alt="Category 1 image"
          title="Category 1 image"
        />
      </template>
    </Category>
    <Category>
      <div class="category-slot-content" slot="category-slot-content">
        <h1>Category 2</h1>
        <p>Category 2 description</p>
      </div>
      <div class="category-slot-content" slot="category-slot-footer">
        <h1>Category 2</h1>
        <p>Category 2 description</p>
      </div>
    </Category>
    <Category>
      <div class="category-slot-content" slot="category-slot-content">
        <h1>Category 3</h1>
        <video
          controls
          src="http://192.168.1.10:8083/api/v1/stream/5159?token=eyJhbGciOiJIUzUxMiJ9.eyJyb2xlIjoiQURNSU4iLCJwZXJtaXNzaW9ucyI6InZpZGVvOnZpZXcsdmlkZW86ZWRpdCx2aWRlbzpkZWxldGUsdGFnOnZpZXcsdGFnOmVkaXQsdGFnOmRlbGV0ZSxwbGF5bGlzdDp2aWV3LHBsYXlsaXN0OmVkaXQscGxheWxpc3Q6ZGVsZXRlLHVzZXI6bWFuYWdlLGxvZzp2aWV3IiwidXNlcklkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE3NjI3ODk2NDgsImV4cCI6MTc2MzM5NDQ0OH0.h4LTw_FwdiZiqsI_WHI6BT1hFdrQf1MeYEVDNvW9Np3WyHFImKpyLrDUirZVmZjB2AjC-UKSzY_WktjF-XS4ZA"
        ></video>
      </div>
      <div class="category-slot-content" slot="category-slot-footer">
        <h1>Category 3</h1>
        <video
          controls
          src="http://192.168.1.10:8083/api/v1/stream/5159?token=eyJhbGciOiJIUzUxMiJ9.eyJyb2xlIjoiQURNSU4iLCJwZXJtaXNzaW9ucyI6InZpZGVvOnZpZXcsdmlkZW86ZWRpdCx2aWRlbzpkZWxldGUsdGFnOnZpZXcsdGFnOmVkaXQsdGFnOmRlbGV0ZSxwbGF5bGlzdDp2aWV3LHBsYXlsaXN0OmVkaXQscGxheWxpc3Q6ZGVsZXRlLHVzZXI6bWFuYWdlLGxvZzp2aWV3IiwidXNlcklkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE3NjI3ODk2NDgsImV4cCI6MTc2MzM5NDQ0OH0.h4LTw_FwdiZiqsI_WHI6BT1hFdrQf1MeYEVDNvW9Np3WyHFImKpyLrDUirZVmZjB2AjC-UKSzY_WktjF-XS4ZA"
        ></video>
      </div>
    </Category>
  </div>
</template>

<script>
import Category from "./components/CategorySlot.vue";

export default {
  name: "App",
  components: {
    Category,
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  text-align: center;
}
.container video {
  width: 100%;
  height: 100%;
}
.container img {
  width: 100%;
}
</style>
